<template>
	<view class="sticky_c">
		<uni-segmented-control :current="current" :values="classList" @clickItem="changeTab" :activeColor="primaryColor"
			styleType="text">
		</uni-segmented-control>
	</view>
	<view class="page">
		<list reqUrl="/api/teamorder" :reqData="reqData" ref="listInstance" formatData :handleFormat="handleFormat"
			emptyText="暂无订单" limit="5">
			<template v-slot="{ list }">
				<view class="order container" v-for="(item, orderIndex) in list" :key="item.order_id">
					<view class="head_bar">
						<view class="left">
							<view>订单编号：{{ item.order_no }}</view>
							<view class="time">创建时间：{{ item.create_at }}</view>
						</view>
						<view class="right">
							<view class="status">
								{{item.settlement_state_name}}
							</view>
						</view>
					</view>
					<view class="goods_c">
						<view class="good">
							<goods image_width="70px" image_height="70px" :image="imgHost + item.pic"
								:name="item.goods_title" :sub_name="item.goods_sub_title" :price_integer="item._integer"
								:price_decimal="item._decimal" :num="item.buy_num"></goods>
						</view>
					</view>
					<view class="bottom_c">
						<view class="userInfo">
							<u-avatar :src="item.head_img" size="36px"></u-avatar>
							<view class="right">
								<view class="nick one-line">{{item.nickname}}</view>
								<view class="id">ID：{{item.user_id}}</view>
							</view>
						</view>
						<view class="commission">
							<text>佣金：</text>
							<text class="special">￥{{ item.commission }}</text>
						</view>
					</view>
				</view>
			</template>
		</list>
	</view>
</template>
<script setup>
	import { ref } from 'vue';
	import request from '@/utils/common/request/index';
	import { onPullDownRefresh, onReachBottom, onLoad } from '@dcloudio/uni-app';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { imgHost } = getApp().globalData;
	const { primaryColor, secondaryColor } = useGetThemColor();

	onLoad(option => {
		if (option.type !== undefined) current.value = Number(option.type);
	})

	// * tab
	let current = ref(0);
	let classList = ref(['待结算', '已结算']);
	let reqData = { settlement_state: 2 };
	const changeTab = ({ currentIndex }) => {
		current.value = currentIndex;
		reqData.settlement_state = currentIndex === 0 ? 2 : 1;
		listInstance.value.resetRequest();
	};

	// * 订单列表
	const listInstance = ref();
	// * 订单数据格式化函数
	const handleFormat = (res) => {
		let data = res.data;
		data.forEach(item => {
			[item._integer, item._decimal] = item.present_price.split('.');
		});
		return data;
	};
	/**下拉刷新事件 */
	onPullDownRefresh(() => {
		Promise.all([listInstance.value.resetRequest()]).finally(() => {
			uni.stopPullDownRefresh();
		});
	});
	// * 页面触底事件，不能删除，否则不能触发list组件触底事件
	onReachBottom(() => {});
</script>
<style lang="scss" scoped>
	.sticky_c {
		position: sticky;
		top: 0;
		z-index: 9;
		background-color: #fff;

		::v-deep .segmented-control {
			height: 42px !important;
		}

		::v-deep .segmented-control__item--text {
			padding: 8px 0 !important;
		}
	}

	.order {
		margin-bottom: 10px;
		border-radius: 10px;
		background-color: #fff;

		&:last-child {
			margin-bottom: 0;
		}

		.head_bar {
			display: flex;
			padding: 10px 0;
			color: #999;

			.left {
				flex: 1;
				padding-right: 10px;

				.time {
					margin-top: 2px;
				}
			}

			.right {
				flex-shrink: 0;
				text-align: right;

				.status {
					margin-bottom: 2px;
					color: v-bind(secondaryColor);
				}
			}
		}

		.goods_c {
			padding-bottom: 10px;
			border-top: 1px solid #f6f6f6;
			border-bottom: 1px solid #f6f6f6;

			.good {
				margin-top: 10px;
			}
		}

		.bottom_c {
			display: flex;
			align-items: center;
			padding: 14px 0;


			.userInfo {
				flex: 1;
				display: flex;
				padding-right: 8px;

				.right {
					padding: 2px 0 2px 8px;
				}

				.nick {
					margin-bottom: 2px;
				}

				.id {
					font-size: 12px;
					color: #999;
				}
			}

			.commission {
				font-weight: bold;

				.special {
					color: v-bind(secondaryColor);
				}
			}

		}
	}
</style>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>